<script setup>
  import { onMounted, reactive, ref } from 'vue'
  import { SyncOutlined } from '@ant-design/icons-vue'
  import { useRouter } from 'vue-router'
  import { PAGE_SIZE_OPTIONS } from '/@/constants/common-const.js'
  import { smartSentry } from '/@/lib/smart-sentry.js'
  import { REVIEW_STATUS } from '/@/constants/business/b-agent/enterprise/enterprise-const.js'
  import { certRecordApi } from '/@/api/business/b-agent/enterprise/cert-record-api.js'

  const router = useRouter()

  // 表格列定义
  const columns = [
    {
      title: '申请编号',
      dataIndex: 'id',
      key: 'id',
      width: '15%',
    },
    {
      title: '申请时间',
      dataIndex: 'applyTime',
      key: 'applyTime',
      width: '15%',
    },
    {
      title: '审核时间',
      dataIndex: 'auditTime',
      key: 'auditTime',
      width: '15%',
    },
    {
      title: '认证有效期',
      dataIndex: 'validPeriod',
      key: 'validPeriod',
      width: '15%',
    },
    {
      title: '申请类型',
      dataIndex: 'fApplyFlag',
      key: 'fApplyFlag',
      width: '12%',
    },
    {
      title: '审核状态',
      dataIndex: 'auditStatus',
      key: 'auditStatus',
      width: '13%',
    },
    {
      title: '操作',
      key: 'action',
      width: '15%',
      align: 'right',
    },
  ]

  // 表格加载loading
  const tableLoading = ref(false)
  // 表格数据
  const tableData = ref([])
  // 总数
  const total = ref(0)

  const queryFormState = {
    pageNo: 1,
    pageSize: 10,
  }
  // 查询表单form
  const queryForm = reactive({ ...queryFormState })

  const certRecord = async () => {
    tableLoading.value = true
    try {
      const queryResult = await certRecordApi.queryPage(queryForm)
      queryResult.data.forEach((item) => {
        if (item.applyTime) {
          item.applyTime = formatCustomDateTime(new Date(item.applyTime))
        }
        if (item.auditTime) {
          item.auditTime = formatCustomDateTime(new Date(item.auditTime))
        }
      })
      tableData.value = queryResult.data
      total.value = queryResult.total
    } catch (e) {
      smartSentry.captureError(e)
    } finally {
      tableLoading.value = false
    }
  }

  function formatCustomDateTime(date) {
    const year = date.getFullYear()
    const month = String(date.getMonth() + 1).padStart(2, '0')
    const day = String(date.getDate()).padStart(2, '0')
    const hours = String(date.getHours()).padStart(2, '0')
    const minutes = String(date.getMinutes()).padStart(2, '0')
    const seconds = String(date.getSeconds()).padStart(2, '0')

    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}` // 自定义格式
  }

  const getStatusText = (status) => {
    const statusMap = {
      0: REVIEW_STATUS.TO_BE_REVIEW.desc,
      1: REVIEW_STATUS.REVIEWING.desc,
      2: REVIEW_STATUS.REVIEW_APPROVED.desc,
      3: REVIEW_STATUS.REVIEW_NOT_APPROVED.desc,
    }
    return statusMap[status] || '未知状态'
  }

  const getFlagText = (status) => {
    const statusMap = {
      true: '申请',
      false: '更新',
    }
    return statusMap[status] || '未知状态'
  }

  // 返回按钮处理函数
  const handleReturn = () => {
    // 处理返回逻辑
    router.back()
  }

  // 查看详情处理函数
  const handleDetail = (record) => {
    // 处理查看详情逻辑
    getRecord(record)
  }

  const record = ref(null)
  const loading = ref(true)

  const getRecord = async (record) => {
    try {
      // 创建符合 EnterpriseFindIdRO 的请求体
      const requestBody = {
        id: record.id,
      }

      const queryRuselt = await certRecordApi.findById(requestBody)
      record.value = queryRuselt.data // 假设返回的数据在 data 字段中
      record.value.applyTime = formatCustomDateTime(new Date(record.value.applyTime))
      record.value.auditTime = formatCustomDateTime(new Date(record.value.auditTime))
    } catch (e) {
      smartSentry.captureError(e)
    } finally {
      loading.value = false
    }
  }

  onMounted(() => {
    certRecord()
  })
</script>

<template>
  <div class="enterprise-auth">
    <div class="page-header">
      <h3>实名认证申请记录</h3>
      <a-button type="primary" class="return-btn" @click="handleReturn">返回</a-button>
    </div>

    <div class="auth-record-table">
      <a-table :columns="columns" :data-source="tableData" :pagination="false" size="middle" bordered>
        <!-- 自定义单元格 -->
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'auditStatus'">
            {{ getStatusText(record.auditStatus) }}
          </template>
          <template v-if="column.dataIndex === 'fApplyFlag'">
            {{ getFlagText(record.fApplyFlag) }}
          </template>
          <template v-if="column.key === 'action'">
            <div class="action-cell">
              <a @click="handleDetail(record)">查看详情</a>
              <sync-outlined v-if="record.showSync" class="sync-icon" />
            </div>
          </template>
        </template>
      </a-table>

      <!-- 分页 -->
      <div class="smart-query-table-page">
        <a-pagination
          showSizeChanger
          showQuickJumper
          show-less-items
          :page_sizeOptions="PAGE_SIZE_OPTIONS"
          :defaultpage_size="queryForm.pageSize"
          v-model:current="queryForm.pageNo"
          v-model:page_size="queryForm.pageSize"
          :total="total"
          @change="certRecord"
          @showSizeChange="certRecord"
          :show-total="(total) => `共${total}条`"
        />
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
  .enterprise-auth {
    position: relative;
    padding: 24px;
    background: #fff;

    .page-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24px;

      h3 {
        font-size: 16px;
        color: #333;
        margin: 0;
        font-weight: 500;
      }

      .return-btn {
        position: absolute;
        right: 24px;
        top: 24px;
        font-size: 14px;
        height: 32px;
        padding: 4px 16px;
      }
    }

    .auth-record-table {
      .action-cell {
        text-align: right;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 8px;

        .sync-icon {
          color: #1890ff;
          font-size: 14px;
        }
      }

      :deep(.ant-table) {
        border: 1px solid #f0f0f0;
      }

      :deep(.ant-table-thead > tr > th) {
        background: #fafafa;
        font-weight: 500;
      }

      .pagination-container {
        margin-top: 16px;
        display: flex;
        justify-content: flex-end;
      }

      a {
        color: #1890ff;
        text-decoration: none;

        &:hover {
          color: #40a9ff;
        }
      }
    }
  }
</style>
